<template>
	<div class="mainList">
		<div class="mainListEach">
			<div class="mainListEachBox">
				<img src="../../../assets/images/收音机.png"/>
				<p>本地音乐<span>(362)</span></p>
			</div>
		</div>
		<div class="mainListEach">
			<div class="mainListEachBox">
				<img src="../../../assets/images/收音机.png"/>
				<p>最近播放<span>(100)</span></p>
			</div>
		</div>
		<div class="mainListEach">
			<div class="mainListEachBox">
				<img src="../../../assets/images/收音机.png"/>
				<p>下载管理<span>(358)</span></p>
			</div>
		</div>
		<div class="mainListEach">
			<div class="mainListEachBox">
				<img src="../../../assets/images/收音机.png"/>
				<p>我的电台<span>(2)</span></p>
			</div>
		</div>
		<div class="mainListEach">
			<div class="mainListEachBox">
				<img src="../../../assets/images/收音机.png"/>
				<p>我的收藏<span>(6)</span></p>
			</div>
		</div>
		<div class="shadow">
			
		</div>
	</div>
</template>

<script>
	export default{
		name:"mainList",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
	.mainList{
		width: 100%;
		.mainListEach{
			border-top: 1px solid #f6f6f6;
			padding: vw(15) 0;
			.mainListEachBox{
				margin-left: vw(28);
				display: flex;
				align-items: center;
				font-size: 0;
				img{
					width: vw(28);
				}
				p{
					margin-left: vw(25);
					font-size: vw(15);
					font-weight: bold;
					span{
						margin-left: vw(6);
						font-size: vw(12);
						color: #a3a3a3;
					}
				}
			}
		}
		.shadow{
			width: 100%;
			height: vw(10);
			background: #f4f4f4;
		}
	}
</style>